<template>
	<view class="container" v-if="return_info">
		<view class="content">
			<view class="status bg-box">
				<view class="t-1">
					{{ state_text[return_info.state] }}
				</view>
				<!-- <view class="t-2">
					你已经发起退款申请，商家将在35小时59分内处理
				</view> -->
				<!-- 仅退货 -->
				<view v-if="return_info.type==0" class="progress">
					<view class="item only-m" v-for="(item,i) in s_list" :key="i" :class="i<=status_1[return_info.state] ?'s-item':''">
						<view class="img">
							<image v-if="i<=status_1[return_info.state]" :src="$img_path('/pagesMine/31.png')" mode="widthFix"></image>
							<image v-else :src="$img_path('/pagesMine/32.png')" mode="widthFix"></image>
						</view>
						<text :style="{color:i<status_1[return_info.state]?'#333333' : i<=status_1[return_info.state]?'#E72A2A' : '#B4B4B4'}">{{item}}</text>
					</view>
				</view>
				
				<!-- 退货退款 -->
				<view v-if="return_info.type==1" class="progress">
					<view class="item r-all" v-for="(item,i) in s_list_2" :key="i" :class="i<=1 ?'s-item':''">
						<view class="img">
							<image v-if="i<=1" :src="$img_path('/pagesMine/31.png')" mode="widthFix"></image>
							<image v-else :src="$img_path('/pagesMine/32.png')" mode="widthFix"></image>
						</view>
						<text :style="{color:i<1?'#333333' : i==1?'#E72A2A' : '#B4B4B4'}">{{item}}</text>
					</view>
				</view>
				
				<!-- 换货 -->
				<view v-if="return_info.type==2" class="progress">
					<view class="item r-all" v-for="(item,i) in s_list_3" :key="i" :class="i<=1 ?'s-item':''">
						<view class="img">
							<image v-if="i<=1" :src="$img_path('/pagesMine/31.png')" mode="widthFix"></image>
							<image v-else :src="$img_path('/pagesMine/32.png')" mode="widthFix"></image>
						</view>
						<text :style="{color:i<1?'#333333' : i==1?'#E72A2A' : '#B4B4B4'}">{{item}}</text>
					</view>
				</view>
				
			</view>
			
			<!-- 退款成功 -->
			<view class="r-success bg-box" v-if="status_1[return_info.state]==3">
				<view class="title">
					<text>退款金额：</text>
					<text>￥{{return_info.price}}</text>
				</view>
				<view class="progress r-price">
					<view class="item" :class="return_info.state==1 ?'s-item':''">
						<view class="img">
							<image v-if="return_info.state==4" :src="$img_path('/pagesMine/14.png')" mode="widthFix"></image>
							<image v-else :src="$img_path('/pagesMine/32.png')" mode="widthFix"></image>
						</view>
						<text>同意退款</text>
						<text class="time">{{return_info.agreetime_text}}</text>
					</view>
					<view class="item" :class="return_info.state==7 ?'s-item':''">
						<view class="img">
							<image v-if="return_info.state==7" :src="$img_path('/pagesMine/14.png')" mode="widthFix"></image>
							<image v-else :src="$img_path('/pagesMine/32.png')" mode="widthFix"></image>
						</view>
						<text>银行受理</text>
						<text class="time">05/20  13:00:00</text>
					</view>
					<view class="item" :class="false ?'s-item':''">
						<view class="img">
							<image v-if="false" :src="$img_path('/pagesMine/14.png')" mode="widthFix"></image>
							<image v-else :src="$img_path('/pagesMine/32.png')" mode="widthFix"></image>
						</view>
						<text>退款到账</text>
						<text class="time last">05/20  13:00:00</text>
					</view>
				</view>
			</view>
			
			<!-- 拒绝退款 -->
			<view class="return-msg bg-box" v-if="return_info.state==2">
				<view class="title">
					拒绝原因
				</view>
				<view class="text">
					内容内容内容内容内容内容内容内容内容内容内容内
					容内容内容内容
				</view>
			</view>
			
			<view class="return-info bg-box">
				<view class="title">
					退款信息
				</view>
				<view class="goods">
					<image :src="$img_base_url(return_info.goods.image)" mode="aspectFill"></image>
					<view class="g-info">
						<view class="name">
							<view class="text">
								{{return_info.goods.title}}
							</view>
							<view class="price">
								¥ <text>{{gPrice(return_info.goods.price)[0]}}</text>{{gPrice(return_info.goods.price)[1]}}
							</view>
						</view>
						<view class="spec">
							<view class="text">
								{{return_info.goods.difference}}
							</view>
							<view class="num">
								x {{return_info.goods.number}}
							</view>
						</view>
					</view>
				</view>
				
				<view class="content-item">
					<text class="label">退款金额</text>
					<view class="value">
						￥{{return_info.price}}
					</view>
				</view>
				<view class="content-item">
					<text class="label">售后方式</text>
					<view class="value">
						{{return_info.type==0 ? '仅退款' : return_info.type==1 ? '退货退款' : ''}}
					</view>
				</view>
				<view class="content-item">
					<text class="label">货物状态</text>
					<view class="value">
						{{return_info.expressType==0?'未收到货/已拒收' : '已到货'}}
					</view>
				</view>
				<view class="content-item">
					<text class="label">退款原因</text>
					<view class="value">
						{{return_info.refund_content}}
					</view>
				</view>
			</view>
			
			<!-- 未寄回 -->
			<view class="r-addres bg-box" v-if="return_info.type==1">
				<view class="c-1">
					<text>寄回地址</text>
					<view class="a-info">
						<view class="d-a">
							详细地址详细地址详细地址详细地址详
						</view>
						<view class="user">
							张三  123****8910  XXX省XXX市XXX区
						</view>
					</view>
				</view>
			</view>
			<!-- 寄回填写单号后 -->
			<view class="r-addres y_order_no bg-box" v-if="return_info.type==1&&return_info.state==1">
				<view class="c-1">
					<text>寄回地址</text>
					<view class="a-info">
						<view class="d-a">
							详细地址详细地址详细地址详细地址详
						</view>
						<view class="user">
							张三  123****8910  XXX省XXX市XXX区
						</view>
					</view>
				</view>
				<view class="content-item">
					<text class="label">物流单号</text>
					<view class="value">
						49646444494989849
					</view>
				</view>
				<view class="content-item">
					<text class="label">物流公司</text>
					<view class="value">
						顺丰快递
					</view>
				</view>
				<view class="content-item">
					<text class="label">物流说明</text>
					<view class="value">
						内容内容内容内容
					</view>
				</view>
				<view class="content-item img">
					<text class="label">凭证</text>
					<view class="value">
						<image :src="$img_path('/mall/5.png')" mode="aspectFill"></image>
						<image :src="$img_path('/mall/5.png')" mode="aspectFill"></image>
						<image :src="$img_path('/mall/5.png')" mode="aspectFill"></image>
					</view>
				</view>
			</view>
			
			<!-- 换货 收货地址 -->
			<view class="r-addres bg-box" v-if="return_info.type==2">
				<view class="c-1">
					<text>收货地址</text>
					<view class="a-info">
						<view class="d-a">
							详细地址详细地址详细地址详细地址详
						</view>
						<view class="user">
							张三  123****8910  XXX省XXX市XXX区
						</view>
					</view>
				</view>
			</view>
			
			<view class="pz-img bg-box">
				<view class="title">
					凭证描述
				</view>
				<view class="image-box">
					<image v-for="item in return_info.images" @click="preview()" :src="$img_base_url(item)" mode="aspectFill"></image>
				</view>
				<view class="text">
					{{return_info.refund_content}}
				</view>
			</view>
			
			<view class="b-info bg-box">
				<view class="content-item">
					<text class="label">售后编号</text>
					<view class="value">
						<!-- 4564611111111611651541 -->
					</view>
				</view>
				<view class="content-item">
					<text class="label">申请时间</text>
					<view class="value">
						{{return_info.createtime_text}}
					</view>
				</view>
				<view class="content-item">
					<text class="label">退货数量</text>
					<view class="value">
						{{return_info.goods_number}}
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 商家处理 -->
		<view class="item_btn_box" v-if="return_info.state==0">
			<button class="w-180 black-btn" @click="closeRefund">撤销申请</button>
			<button class="w-180 red-btn" >修改申请</button>
		</view>
		
		<!-- 售后关闭 -->
		<view class="item_btn_box" v-if="return_info.state==5">
			<button class="w-180 red-btn" >删除</button>
		</view>
		
		
		<!-- 退货退款 同意 -->
		<view class="item_btn_box" v-if="return_info.state==1&&return_info.type==1">
			<button class="w-180 black-btn" @click="closeRefund">撤销申请</button>
			<button class="w-260 red-btn" @click="toOrderNo">填写快递单号</button>
		</view>
		
		<!-- 退货退款 拒绝 -->
		<view class="item_btn_box" v-if="return_info.state==2">
			<button class="w-180 red-btn" @click="closeRefund">撤销申请</button>
		</view>
		
		
		<!-- 换货 待收货 -->
		<view class="item_btn_box" v-if="false">
			<button class="w-180 black-btn">查看物流</button>
			<button class="w-180 red-btn">确认收货</button>
		</view>
	</view>
</template>

<script>
	const FormData = require('@/utils/formdata/index.js')
	import { getRefundInfo, closeRefund } from '@/utils/api/mallApi.js'
	export default {
		data() {
			return {
				state_text:{
					'0':'退款申请请等待商家处理',
					'1':'卖家同意',
					'2':'卖家拒绝',
					'3':'申请平台介入',
					'4':'成功退款',
					'5':'退款已关闭',
					'6':'已提交物流',
					'7':'退款中',
					'8':'退款失败'
				},
				status_1:{
					'0':'0',
					'1':'2',
					'2':'0',
					'3':'1',
					'4':'3',
					'5':'0',
					'6':'2',
					'7':'3',
					'8':'3'
				},
				s_list:['提交申请','商家处理','商家退款','退款成功'],
				s_list_2:['提交申请','商家处理','商家退款','退款成功'],
				s_list_3:['提交申请','商家处理','商家发货','买家收货，售'],
				
				return_id:null,
				return_info:null
			};
		},
		onLoad(options) {
			this.return_id = options.id
			this.getRefundInfo()
		},
		methods:{
			// 售后详情
			getRefundInfo(){
				let formData = new FormData()
				formData.append('id',this.return_id)
				uni.showLoading()
				getRefundInfo(formData.getData()).then(res=>{
					
					uni.hideLoading()
					this.return_info = res.data
				})
			},
			
			// 撤销申请 
			closeRefund(){
				let formData = new FormData()
				formData.append('id',this.return_id)
				uni.showLoading()
				closeRefund(formData.getData()).then(res=>{
					uni.hideLoading()
					uni.showToast({
						title:'撤销成功',
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack()
					})
				})
			},
			
			preview(){
				uni.previewImage({
					urls:[]
				})
			},
			
			toOrderNo(){
				uni.navigateTo({
					url:'/pagesMine/shopGoodsOrder/afterDetail/add_logistics_info'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	.content{
		padding: 0 22rpx 30rpx;
		box-sizing: border-box;
		.bg-box{
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-top: 20rpx;
		}
		.status{
			padding: 28rpx 20rpx 46rpx 22rpx;
			box-sizing: border-box;
			.t-1{
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
			}
			.t-2{
				font-weight: 400;
				font-size: 28rpx;
				color: #B4B4B4;
				line-height: 40rpx;
				margin-top: 16rpx;
			}
			.progress{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 60rpx;
				.item{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;
					&:not(:first-child){
						&::before{
							content: '';
							width: 114rpx;
							height: 0rpx;
							border: 2rpx solid #B4B4B4;
							position: absolute;
							right: calc(100% - 18rpx);
							top: 24rpx;
						}
						&.s-item{
							&::before{
								border-color: #E72A2A;
							}
						}
					}
					&.r-all:not(:first-child){
						&::before{
							width: 62rpx !important;
							right: calc(100% - 14rpx);
						}
					}
					image{
						width: 48rpx;
						height: 48rpx;
					}
					text{
						font-weight: 400;
						font-size: 26rpx;
						color: #333333;
						line-height: 36rpx;
						margin-top: 12rpx;
					}
				}
			}
		}
		.r-success{
			padding: 28rpx 26rpx 40rpx;
			box-sizing: border-box;
			width: 100%;
			.title{
				display: flex;
				justify-content: space-between;
				text{
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
					line-height: 44rpx;
				}
			}
			.r-price{
				display: flex;
				padding: 40rpx 10rpx 0;
				justify-content: space-between;
				.item{
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					position: relative;
					padding-bottom: 32rpx;
					&:not(:first-child){
						&::before{
							content: '';
							width: 184rpx;
							height: 0rpx;
							border: 2rpx solid #B4B4B4;
							position: absolute;
							right: calc(100% - 18rpx);
							top: 24rpx;
						}
						&.s-item{
							&::before{
								border-color: #E72A2A;
							}
						}
					}
					image{
						width: 48rpx;
						height: 48rpx;
					}
					text{
						font-weight: 400;
						font-size: 26rpx;
						color: #000000;
						line-height: 36rpx;
						margin-top: 12rpx;
					}
					text.time{
						display: block;
						position: absolute;
						bottom: 0;
						left: 0;
						font-weight: 400;
						font-size: 20rpx;
						color: #333333;
						line-height: 28rpx;
						white-space: nowrap;
						&.last{
							left: initial;
							right: 0;
						}
					}
				}
			}
		}
		
		.return-msg{
			padding: 26rpx 40rpx 30rpx 22rpx;
			box-sizing: border-box;
			.title{
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
			}
			.text{
				margin-top: 20rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #505050;
				line-height: 40rpx;
			}
		}
	
		.return-info{
			padding: 28rpx 18rpx 16rpx 26rpx;
			box-sizing: border-box;
			
			.title{
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
			}
			.goods{
				display: flex;
				align-items: center;
				&>image{
					width: 180rpx;
					height: 180rpx;
					border-radius: 16rpx;
				}
				.g-info{
					width: calc(100% - 180rpx);
					padding-left: 20rpx;
					box-sizing: border-box;
					margin-top: 20rpx;
					margin-bottom: 20rpx;
					.name{
						display: flex;
						justify-content: space-between;
						align-items: center;
						.text{
							width: 314rpx;
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
							line-height: 44rpx;
						}
						.price{
							font-weight: 900;
							font-size: 28rpx;
							color: #FF2E2E;
							line-height: 56rpx;
							text{
								font-size: 32rpx;
							}
						}
					}
					.spec{
						display: flex;
						align-items: flex-start;
						justify-content: space-between;
						margin-top: 20rpx;
						.text{
							width: 350rpx;
							font-weight: 400;
							font-size: 28rpx;
							color: #505050;
							line-height: 40rpx;
						}
						.num{
							font-weight: bold;
							font-size: 28rpx;
							color: #333333;
							line-height: 40rpx;
						}
					}
				}
			}
			.content-item{
				padding: 20rpx 0;
				display: flex;
				align-items: flex-start;
				.label{
					width: 200rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
				}
				.value{
					width: calc(100% - 200rpx);
					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
					line-height: 42rpx;
				}
			}
		}
		
		.r-addres{
			padding: 34rpx 24rpx 32rpx 22rpx;
			box-sizing: border-box;
			.c-1{
				display: flex;
				align-items: center;
				justify-content: space-between;
				&>text{
					display: inline-block;
					width: 150rpx;
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
					line-height: 44rpx;
				}
				.a-info{
					width: calc(100% - 150rpx);
					text-align: right;
					.d-a{
						font-weight: 400;
						font-size: 24rpx;
						color: #333333;
						line-height: 34rpx;
					}
					.user{
						font-weight: bold;
						font-size: 24rpx;
						color: #333333;
						line-height: 34rpx;
						margin-top: 8rpx;
					}
				}
			}
			&.y_order_no{
				.c-1{
					padding-bottom: 28rpx;
					text{
						font-weight: 400;
						font-size: 30rpx;
					}
				}
			}
			.content-item{
				padding: 20rpx 0;
				display: flex;
				align-items: flex-start;
				.label{
					width: 200rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
				}
				.value{
					width: calc(100% - 200rpx);
					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
					line-height: 42rpx;
					text-align: right;
				}
			}
			.img{
				.label{
					width: auto;
				}
				.value{
					width: auto;
					flex: 1;
					display: flex;
					justify-content: flex-end;
					image{
						width: 152rpx;
						height: 152rpx;
						border-radius: 20rpx;
						margin-left: 18rpx;
					}
				}
			}
		}
		
		.pz-img{
			padding: 28rpx 20rpx 40rpx 26rpx;
			box-sizing: border-box;
			.title{
				font-weight: bold;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
			}
			.image-box{
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;
				image{
					width: 153rpx;
					height: 153rpx;
				}
			}
			.text{
				font-weight: 400;
				font-size: 28rpx;
				color: #505050;
				line-height: 40rpx;
				margin-top: 20rpx;
			}
		}
		.b-info{
			padding: 2rpx 26rpx 16rpx;
			box-sizing: border-box;
			.content-item{
				padding: 20rpx 0;
				display: flex;
				align-items: flex-start;
				.label{
					width: 200rpx;
					font-weight: 400;
					font-size: 30rpx;
					color: #333333;
					line-height: 42rpx;
				}
				.value{
					width: calc(100% - 200rpx);
					font-weight: bold;
					font-size: 30rpx;
					color: #000000;
					line-height: 42rpx;
				}
			}
		}
	}
	
	.item_btn_box{
		display: flex;
		align-items: center;
		justify-content: flex-end;
		position: sticky;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		padding: 20rpx 22rpx;
		padding-bottom: calc(constant(safe-area-inset-bottom) + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
		box-sizing: border-box;
		background-color: #FFFFFF;
		.w-180{
			width: 180rpx;
			height: 68rpx;
			
		}
		.w-260{
			width: 260rpx;
			height: 68rpx;
		}
		.w-270{
			width: 270rpx;
			height: 68rpx;
		}
		button{
			background: #FFFFFF;
			border-radius: 38rpx 38rpx 38rpx 38rpx;
			font-weight: 400;
			font-size: 30rpx;
			line-height: 68rpx;
			&:not(:first-child){
				margin-left: 20rpx;
			}
			&.black-btn{
				border: 2rpx solid #B4B4B4;
				color: #333333;
			}
			&.red-btn{
				border: 2rpx solid #E72A2A;
				color: #E72A2A;
			}
			&.c-btn{
				background: linear-gradient( 92deg, #FFA233 0%, #FB4C4C 100%);
				color: #FFFFFF;
			}
		}
	}
}
</style>
